Skip to content

809: refactor footer#812

Merged
luoh00 merged 4 commits intomainfrom
809
Mar 3, 2026
Merged

809: refactor footer#812
luoh00 merged 4 commits intomainfrom
809

Conversation

@luoh00
Copy link
Collaborator

@luoh00 luoh00 commented Feb 27, 2026 •
edited
Loading

809

Description of changes

Refactored footer component to look more like the one in Mantine UI.

Checklist before review

  • I have done a thorough self-review of the PR
  • Copilot has reviewed my latest changes, and all comments have been fixed and/or closed.
  • If I have made database changes, I have made sure I followed all the db repo rules listed in the wiki here. (check if no db changes)
  • All tests have passed
  • I have successfully deployed this PR to staging
  • I have done manual QA in both dev (and staging if possible) and attached screenshots below.

Screenshots

Dev

Screenshot 2026-02-27 at 4 33 10 PM Screenshot 2026-02-27 at 4 35 05 PM

Staging

Screenshot 2026-02-27 at 5 20 41 PM image

@github-actions
Copy link
Contributor

github-actions bot commented Feb 27, 2026

Available PR Commands

  • /ai - Triggers all AI review commands at once
  • /review - AI review of the PR changes
  • /describe - AI-powered description of the PR
  • /improve - AI-powered suggestions
  • /deploy - Deploy to staging

See: https://github.com/tahminator/codebloom/wiki/CI-Commands

@luoh00
Copy link
Collaborator Author

luoh00 commented Feb 27, 2026

/deploy

@github-actions
Copy link
Contributor

github-actions bot commented Feb 27, 2026

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 No relevant tests
🔒 Security concerns

Reverse tabnabbing:
ActionIcon anchors use target="_blank" without rel="noopener noreferrer". Add rel="noopener noreferrer" to all external links opened in a new tab.

⚡ Recommended focus areas for review

Broken Link

The Discord icon link's href points to Instagram instead of the Discord invite URL, causing a mismatch between label/text and destination.

 
<Anchor
  href={"https://discord.com/invite/jKaPfHtcaD"}
  c={"dimmed"}
  size={"sm"}
  variant={"subtle"}
>
  <Text>Join our Discord</Text>
</Anchor>
<FooterIconLink
  href={"https://www.instagram.com/patinanetwork"}
  ariaLabel={"Patina Network Discord"}
>
  <FaDiscord size={16} />
</FooterIconLink>
Security

External links opened via ActionIcon use target="_blank" without rel="noopener noreferrer", which risks reverse tabnabbing. Add the rel attribute.

 
<ActionIcon
  component="a"
  href={href}
  target="_blank"
  color={"dark.0"}
  variant="transparent"
  size="md"
  aria-label={ariaLabel}
>
CSS Variable

The gap uses calc(var(--spacing) * N), but --spacing is likely undefined; use Mantine spacing tokens (e.g., var(--mantine-spacing-xl)) or fixed values to ensure consistent spacing.

 
display: flex;
justify-content: flex-end;
gap: calc(var(--spacing) * 20);

@mixin smaller-than $mantine-breakpoint-sm {
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
}

github-actions[bot]
github-actions bot reviewed Feb 27, 2026
View reviewed changes
@luoh00 luoh00 force-pushed the 809 branch 2 times, most recently from d397376 to 5c91c0e Compare March 1, 2026 22:56
@luoh00
Copy link
Collaborator Author

luoh00 commented Mar 1, 2026

/deploy

@luoh00
Copy link
Collaborator Author

luoh00 commented Mar 2, 2026

/deploy

@tahminator
Copy link
Owner

tahminator commented Mar 3, 2026

/ai

@tahminator
Copy link
Owner

tahminator commented Mar 3, 2026

/review

@tahminator
Copy link
Owner

tahminator commented Mar 3, 2026

/describe

@tahminator
Copy link
Owner

tahminator commented Mar 3, 2026

/improve

@github-actions
Copy link
Contributor

github-actions bot commented Mar 3, 2026

Preparing PR description...

@github-actions
Copy link
Contributor

github-actions bot commented Mar 3, 2026

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
🧪 PR contains tests
🔒 No security concerns identified
⚡ Recommended focus areas for review

Layout & Responsiveness

The PR introduces significant changes to the footer's layout and responsiveness using Mantine components and CSS modules. While screenshots are provided, it's crucial to manually verify the footer's appearance and behavior across various screen sizes, especially around the sm breakpoint, to ensure the layout is consistent and free of visual regressions or unexpected breaks.

 
<div
  data-testid={"footer-logo-mission-desktop"}
  className={`mantine-visible-from-sm ${styles.footerLeft}`}
>
  <Flex>
    <img src={Logo} width={45} alt={"Logo"} />
    <Text pt={8} pl={6} fw={550} size={"md"}>
      Codebloom
    </Text>
  </Flex>
  <Flex>
    <Text pl={8} c={"dimmed"} size={"sm"}>
      {missionText}
    </Text>
  </Flex>
  <GotoAdminPageButton />
</div>
<div className={styles.footerRight}>
  <div
    data-testid={"footer-logo-mission-mobile"}
    className={`mantine-hidden-from-sm`}
  >
    <Flex>
      <img src={Logo} width={45} alt={"Logo"} />
      <Text pt={8} pl={6} fw={550} size={"md"}>
        Codebloom
      </Text>
    </Flex>
    <Flex>
      <Text c={"dimmed"} size={"sm"}>
        {missionText}
      </Text>
    </Flex>
    <GotoAdminPageButton />
  </div>
  <div data-testid={"footer-links-section"}>
    <Text fw={550} pb={4}>
      About
    </Text>
    <Box pt={1} pb={3}>
      <Anchor href="/privacy" c="dimmed" size="sm" variant="subtle">
        Privacy Policy
      </Anchor>
    </Box>
    <Flex align="center">
      <Anchor
        href={"https://github.com/tahminator/codebloom"}
        c={"dimmed"}
        size={"sm"}
        variant={"subtle"}
      >
        <Text>View GitHub</Text>
      </Anchor>
      <FooterIconLink
        href={"https://github.com/tahminator/codebloom"}
        ariaLabel={"CodeBloom GitHub"}
      >
        <FaGithub size={16} />
      </FooterIconLink>
    </Flex>
  </div>
  <div>
    <Text fw={550} pb={4}>
      Community
    </Text>
    <Flex align={"center"}>
      <Anchor
        href={"https://www.instagram.com/patinanetwork"}
        c={"dimmed"}
        size={"sm"}
        variant={"subtle"}
      >
        <Text>Follow on Instagram</Text>
      </Anchor>
      <FooterIconLink
        href={"https://www.instagram.com/patinanetwork"}
        ariaLabel={"Patina Network Instagram"}
      >
        <FaInstagram size={16} />
      </FooterIconLink>
    </Flex>
    <Flex align={"center"}>
      <Anchor
        href={"https://discord.com/invite/jKaPfHtcaD"}
        c={"dimmed"}
        size={"sm"}
        variant={"subtle"}
      >
        <Text>Join our Discord</Text>
      </Anchor>
      <FooterIconLink
        href={"https://discord.com/invite/jKaPfHtcaD"}
        ariaLabel={"Patina Network Discord"}
      >
        <FaDiscord size={16} />
      </FooterIconLink>
    </Flex>
  </div>
Accessibility

The "About" and "Community" sections now feature both text links (e.g., 'View GitHub') and corresponding icon links (FooterIconLink) that point to the same destination. While aria-label is used for icons, having redundant links in close proximity might impact accessibility for screen reader users or create a cluttered experience. Consider if both text and icon links are necessary or if they can be combined more effectively.

 
<Flex align="center">
  <Anchor
    href={"https://github.com/tahminator/codebloom"}
    c={"dimmed"}
    size={"sm"}
    variant={"subtle"}
  >
    <Text>View GitHub</Text>
  </Anchor>
  <FooterIconLink
    href={"https://github.com/tahminator/codebloom"}
    ariaLabel={"CodeBloom GitHub"}
  >
    <FaGithub size={16} />
  </FooterIconLink>
</Flex>

github-actions[bot]
github-actions bot reviewed Mar 3, 2026
View reviewed changes
@luoh00
Copy link
Collaborator Author

luoh00 commented Mar 3, 2026

/deploy

@luoh00 luoh00 merged commit 0f5f941 into main Mar 3, 2026
35 checks passed
@luoh00 luoh00 deleted the 809 branch March 3, 2026 03:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@github-actions github-actions[bot] github-actions[bot] left review comments

@tahminator tahminator tahminator approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@luoh00 @tahminator